<template>
	<view class="mask bs df-yc wh100">
		<view :class="[bgStyle,'df-yc','py30']">
			<view class="title w100 df-c">
				<view v-if='Poptype=="all"||Poptype=="merge"' style="width: 600rpx;text-align: center;" class="light-title titleColor shsc fb">成功点亮整盒<text
						style="color: #BF2639;" class="mx20">{{bowlData.name}}</text></view>
				<view v-if='Poptype=="success"' style="width: 600rpx;text-align: center;" class="complex-title titleColor shsc fb">合成成功,获得一个<text
						:style="{color:synthesis.textColor}" class="mx20">{{synthesis.title}}</text></view>
				<view v-if='Poptype=="gold"' style="width: 600rpx;text-align: center;" class="complex-gold shsc fb">合成成功,获得一个<text
						:style="{color:synthesis.textColor}" class="mx20">金茶碗</text></view>
			</view>
			<view v-if='Poptype=="merge"' class="complex mt24 df-c fs24">
				获得<text style="color: #BF2639;">土茶碗</text>奖励
			</view>
			<view class="notice">
				<view v-if="Poptype=='all'" class="fs26 titleColor df-yc">
					<text>获得<text style="color: #BF2639;">土茶碗</text>奖励，升级到金茶碗可免费领取</text>
					<text>一个实体金碗</text>
				</view>
				<view v-if="Poptype=='merge'" class="titleColor fs26">
					成功集齐8个土茶碗，是否合成一个火茶碗？
				</view>

				<view v-if="Poptype=='success'" class="titleColor fs26">
					茶碗升级到金茶碗可以免费领取一个<text style="color: #BF2639;">实体金碗</text>
				</view>

				<view v-if="Poptype=='gold'" class="white df-yc fs26">
					<text>到达茶能成事线下实体店出示金茶碗可免费</text>
					<view>领取<text style="color: #FFCC31;">黄金实体茶碗</text></view>
				</view>
			</view>
			<view class="image">
				<image v-if="Poptype!='merge'&&Poptype!='success'" class="getBowl" style="width: 258rpx;"
					:src="decodeURIComponent(bowlData.soilBowl_ico)" mode="widthFix"></image>
				<image v-if="Poptype=='success'||Poptype=='gold'" class="getBowl" style="width: 258rpx;"
					:src="synthesis.ico" mode="widthFix"></image>
				<view v-if="Poptype=='merge'" class="complex-img df-c">
					<view class="left df-yc">
						<image style="width: 112rpx;" :src="decodeURIComponent(bowlData.soilBowl_ico)" mode="widthFix">
						</image>
						<view style="color: #482A2A;" class="num df-c fb fs22">土茶碗<text>x8</text></view>
					</view>
					<view class="mid">
						<image style="width: 67rpx;" src="../../../static/imgs/images/jt.png" mode="widthFix"></image>
					</view>
					<view class="right df-yc">
						<image style="width: 112rpx;" :src="decodeURIComponent(bowlData.fireBowl_ico)" mode="widthFix">
						</image>
						<view style="color: #482A2A;" class="num df-c fb fs22">火茶碗<text>x1</text></view>
					</view>
				</view>
			</view>
			<view class="buttons fb fs26 df-yc">
				<view @click="btnOneHandler(Poptype)" :class="['btn','df-c',btnFill]">{{btnText[Poptype]}}</view>
				<text @click="btnSecHandler(Poptype)" :class="['btn','df-c',btnColor]">{{btnUnder[Poptype]}} </text>
			</view>
			<view class="close" @click="close">
				<image style="width: 46rpx;" :src="temImgUrl+'/close.png'" mode="widthFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Popup',
		props: {
			mergePop: Boolean,
			bowlData: Object,
			Poptype: String

		},
		components: {

		},
		data: function() {
			return {
				temImgUrl: this.$IMG_URL_TEMP,
				bgStyle: 'popup',
				btnColor: 'btn-color',
				btnFill: 'btn-fill',
				btnText: {
					all: '继续点亮',
					merge: '立即合成',
					success: '继续获得茶碗',
					gold: "前往获取"
				},
				btnUnder: {
					all: '了解活动规则',
					merge: '稍后合成',
					success: '查看我的茶碗',
					gold: "稍后获取"
				},
				couponId: 0,
				synthesis: {},
				name: ''
			}
		},
		computed: {
			popupStyle: function() {
				return {
					popup: true
				}
			}
		},
		methods: {
			close() {
				this.$emit('close', this.Poptype)
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
			btnOneHandler(type) {
				switch (type) {
					case 'all':
						this.openScan()
						break;
					case 'merge':
						this.mergeBowl()
						break;
					case 'success':
						this.$emit('close', this.Poptype)
						this.openScan()
						break;
					case 'gold':
						this.jump('/pages/goods/coupon/coupon', {
							id: 1,
							userCouponId: 83
						})
						break;
					default:
						break;
				}
			},
			btnSecHandler(type) {
				switch (type) {
					case 'all':
						this.jump('/pages/user/rules/rules', {
							type: 'rich',
							richText: this.bowlData.bowl_rule
						})
						break;
					case 'merge':
						this.$emit('close', this.Poptype)
						break;
					case 'success':
						this.jump('/pages/goods/collect/collect')
						break;
					case 'gold':
						this.$emit('close', this.Poptype)
					default:
						break;
				}
			},
			//合成茶碗
			mergeBowl() {
				uni.showLoading({
					title: '合成中',
					icon: 'loading'
				})
				this.$api('teaBowl.synthesisBowl', {
					obj_name: 'fire',
					obj_num: 1
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.$tools.toast('合成成功')
						this.synthesis = res.data.bowl
						if (res.data.bowl.name == 'gold') {
							this.$emit('changeType', 'gold')
							this.bgStyle = 'gold'
							this.btnFill = 'btn-gold'
							this.btnColor = 'btn-gold-color'
						} else {
							this.$emit('changeType', 'success')
							this.bgStyle = 'popup'
						}
					}
				}).catch(err => {
					this.$tools.toast(err.data.msg)
				})
			},
			//扫码
			openScan() {
				let that = this
				uni.scanCode({
					success: function(res) {
						that.scan(that.codeParse(res.result))
					}
				});
			},
			scan(code) {
				const that = this
				this.$api('tea.scanAdd', {
					code
				}).then(res => {
					if (res.code == 1) {
						this.$tools.toast("扫码成功")
						this.$emit('updateScanData', res.data)
						console.log(res)
						if (res.data.bowl.bowl_pop) {
							this.Poptype = 'all'
							this.$emit('changeType', this.Poptype)
						}
						if (!res.data.bowl.bowl_pop && res.data.bowl.merge_pop) {
							this.Poptype = 'merge'
							this.$emit('changeType', this.Poptype)
						}
						if (!res.data.bowl.bowl_pop && !res.data.bowl.merge_pop) {
							this.Poptype = ''
							this.$emit('changeType', this.Poptype)
						}
					} else if (res.code == 0) {
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
					}
				})
			},
			// url解析code
			codeParse(url) {
				let codeStr = url.split('?')[1]
				let code = codeStr.split('=')[1]
				return code
			},
		},
		created() {

		},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.popup,
	.gold {
		width: 630rpx;
		//height: 803rpx;
		background-image: url(#{$IMG_URL}/shmbg.jpg);
		border-radius: 20rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;

		.title {
			margin-top: 60rpx;

			.light-title {
				font-size: 50rpx;
			}

			.complex-title {
				font-size: 46rpx;
			}

			.complex-gold {
				color: #FFF1E9;
				font-size: 46rpx;
				text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.3);

			}
		}

		.complex {
			width: 246rpx;
			height: 60rpx;
			background: #FFD5B6;
			border-radius: 30rpx;
		}

		.notice {
			margin-top: 36rpx;
		}

		.image {
			margin-top: 70rpx;

			.complex-img {
				margin-bottom: 80rpx;

				.mid {
					margin: 0 38rpx;
				}

				.num {
					width: 148rpx;
					height: 49rpx;
					background: #FFD5B6;
					border-radius: 24rpx;
				}
			}
		}

		.buttons {
			.btn {
				width: 493rpx;
				height: 90rpx;
			}

			.btn-fill {
				background: linear-gradient(270deg, #53181E, #7D333B);
				box-shadow: 0px 5rpx 18rpx 0px rgba(83, 24, 30, 0.35);
				border-radius: 45rpx;
				color: #FFE3CD;
			}

			.btn-gold {
				background: linear-gradient(1deg, #FFDEC3, #FFF1E9);
				border-radius: 45rpx;
				color: #642329;
			}

			.btn-color {
				color: #53181E;
			}

			.btn-gold-color {
				color: #FFE7D5;
			}
		}
	}

	.gold {
		width: 630rpx;
		height: 803rpx;
		border: 6rpx solid #DDBD51;
		background: linear-gradient(0deg, #6D1E26, #A94650);
		border-radius: 20rpx;
		position: relative;
	}

	.mask {
		padding-top: 300rpx;
		background-color: rgba($color: #000000, $alpha: 0.85);
	}

	.close {
		position: absolute;
		bottom: -100rpx;
	}
</style>
